// 由于 webpack 是基于 node 进行构建的， 所有webpack 的配置文件中 任何合法的node代码都是支持的
var path = require('path')
    // 在内存中 根据指定的模板页面，生成一份内存中的首页，同时 自动吧bundle.js 注入到页面 底部
    // 如果要 配置插件， 需要在导出的对象中，挂载 一个 plugin节点
var htmlWebpackPlugin = require("html-webpack-plugin")
    // 当命令 形式运行 webpack ，它会检查项目根目录 中的配置文件，并读取这个文件，就拿到了导出的这个配置对象
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    mode: "development",
    entry: path.join(__dirname, './src/main.js'), //入口文件
    output: { //指定输出选项
        path: path.join(__dirname, './dist'), //输出路劲
        filename: "bundle.js", //指定输出文件的名称

    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'), //指定模板文件路径
            filename: 'index.html' //设置生成的内存页面名称
        }),
        new VueLoaderPlugin()
    ],
    module: { //配置所有第三方规则
        rules: [
            { test: /\.html$/i, loader: 'html-loader', options: { interpolate: true, }, },
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //这是处理css文件的loader
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //这是处理less文件的 loader ， 安装名： npm i less-loader less -D
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, //这是处理sass文件的 loader ， 安装名： npm i sass-loader node-sass -D
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7491&name=[hash:8]-[name].[ext]' }, //处理图片路径的loader，  安装名： cnpm i url-loader file-loader -D
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
            // 当 limit 给定的值（单位字节）小于 图片大小 ，则不会被转为 base64 ，否则会被转为base64
            //  name=[hash:8]-[name].[ext]    意思是名字由 8位哈希值-原本名字和后缀名组成
            {
                test: /\.m?js$/,
                use: {
                    loader: 'babel-loader',
                    options: {

                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-class-properties']
                    }
                },
                exclude: /(node_modules|bower_components)/
            }, //这是配置Babel来转换语法
            { test: /\.vue$/, use: 'vue-loader' }
        ]
    },
    resolve: {
        alias: { //设置vue被导入时候的包的路径
            // "vue$": "vue/dist/vue.js"
        }
    }
}